// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}

// Two charts definition
var chart0, chart1, chart2;

// Once DOM (document) is finished loading
function generate_chart() {
    var options_per = {
     chart: {
        renderTo: 'chart_0',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'The history data of slightech'
     },
     xAxis: {
        categories: []
     },
     yAxis: {
        title: {
           text: 'The value of data'
        }
     },
     series: []
    };
    var options = {
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'The data of slightech'
     },
     xAxis: {
        categories: ['Today', 'Yesterday', 'Lastweek', 'LastMonth']
     },
     yAxis: {
        title: {
           text: 'The value of data'
        }
     },
     series: []
    };
    var options_pie = {
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the data of slightech'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: []
    };
    //get data from table
    var datas = new Array();
    $(".table").find("tr").each(function(){
        $(this).find("td").each(function(){
            datas.push($(this).text());
        });
    });
    if(datas.length!=0){
        //var names=new Array();
        //var settings=new Array();
        for(var i = 0; i<datas.length/9; i++){
            var det = {
                        name: datas[i*9],
                        data: Array(parseFloat(datas[i*9+1]), parseFloat(datas[i*9+2]), parseFloat(datas[i*9+4]), parseFloat(datas[i*9+6]))
                    };
            var det1 = {
                type: 'pie',
                name: datas[i*9],  
                data: [
                    ['Today', parseFloat(datas[i*9+1])],
                    ['Yesterday', parseFloat(datas[i*9+2])],
                    ['Lastweek', parseFloat(datas[i*9+4])],
                    ['LastMonth', parseFloat(datas[i*9+6])]
                ]  
            };     
            options.series.push(det);
        }
        options_pie.series.push(det1);
    }
    // First chart initialization
    var chart1 = new Highcharts.Chart(options);
    // Second chart initialization (pie chart)
    //var chart2 = new Highcharts.Chart(options_pie);

    $('.eye').click(function () {
        options_per.series=[];
        options_per.xAxis.categories=[];
        var item_name=$(this).parent().siblings().eq(0).text();
        var item_key=$(this).attr("id");
        $.get("/report/history_data", { item_key: item_key }, function(data){ 
            var datas=eval(data);
            var data_value=new Array();
            for(var i=datas['his_data'].length-1;i>=0;i--){ 
                data_value.push(parseInt(datas['his_data'][i].data_value));
                options_per.xAxis.categories.push(datas['his_data'][i].data_date.substr(5,5));
            }
            var det2 = { 
                        name: item_name,
                        data: data_value
                    }
            options_per.series.push(det2);
            var chart0 = new Highcharts.Chart(options_per);
        }, "json");
       
    });

    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {  
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
}
generate_chart();

		 		
<!-- Realtime chart starts -->

function get_default() {
	var my_default = new Array();
	$.ajax({
		url: "/slog/realtime_item/get_first_id_and_server", 
		type: "GET",
		async: false,
		dataType: 'json',
		success: function(data){
			my_default =[data.item_id, data.item_server];         	
		}, 
	});
	return my_default;
} 
var default_item = get_default();
generate_real_chart(default_item[0], default_item[1]);
		$('#real_search_form').ajaxForm({
	        beforeSubmit:function(){if ($('#real_item_server').val() =='' || $('#real_item_id').val() == '') {
	                       alert("Not select item server or item name");}
	                     },
	        type: 'post',
	        url: "/slog/realtime_item/return_id_and_server",
	        dataType: 'json',
	        success: function(data){
	        	$("#m-real-chart").html("");
	        	generate_real_chart(data.item_id,data.item_server);
	        }
	    });
	    
		function generate_real_chart(item_id, item_server) {
			// we use an inline data source in the example, usually data would
			// be fetched from a server
			var totalPoints = 100;
			function getRandomData() {
				var data_array = [];
				$.ajax({
					url: "/slog/realtime_data/get_realtime_data", 
					type: "GET",
					async: false,
					data: { item_id: item_id,item_server:item_server }, 
					success: function(data){ 
		            	var datas=eval(data);
		            	var data_value = [];
			            for(var i=datas.length-1;i>=0;i--){ 
			                data_value.push(parseInt(datas[i].data_value));
			            }
			           	var res = [];
						for (var i = 0; i < data_value.length; ++i) {
							res.push([i, data_value[i]]);
						}
						data_array = res;
			    	}, 
			    });
				return data_array;
				// zip the generated y values with the x values
			}
			function check_alarm() { 
				$.ajax({
					url: "/slog/realtime_data/check_and_alarm", 
					type: "GET",
					async: false,
					dataType: 'json',
					success: function(data){ 
		            	var datas=eval(data);
					
		            	if(datas.length>0) {
		            		$("#alarm-num").replaceWith("<span id='alarm-num'><i class='label label-info'>"+datas.length+"</i></span>");
		            		if($("#hot-bell").hasClass("shake shake-constant")) {
		            			$("#alarm-voice").get(0).play();
		            			$(".alarm_info").children("li").not(".dropdown-head").remove();
		            			 for(var i=datas.length-1;i>=0;i--){
			            			$(".alarm_info").append("<li class='"+datas[i].alarm_id+"'><a data-toggle='modal' href='#alarm-detail'>"+datas[i].alarm_content+"</a></li>"); 
			           			 }
		            		}else{ 
		            			$("#hot-bell").addClass("shake shake-constant");
		            			$("#hot-bell").css("color","red");
		            		}
		            	}else{ 
		            		$("#hot-bell").removeClass("shake shake-constant");
		            		$("#hot-bell").css("color","#777777");
		            		$("#alarm-num").html("");
		            		$(".alarm_info").children("li").not(".dropdown-head").remove();
		            		$("#alarm-voice").get(0).pause();
		            	}
			    	}, 
			    });
			}
			// setup control widget
			var updateInterval = 3000;
			$("#updateInterval").val(updateInterval).change(function () {
				var v = $(this).val();
				if (v && !isNaN(+v)) {
					updateInterval = +v;
					if (updateInterval < 1)
						updateInterval = 1;
					if (updateInterval > 2000)
						updateInterval = 2000;
					$(this).val("" + updateInterval);
				}
			});
			// setup plot
			var options = {
				series: { shadowSize: 0 }, // drawing is faster without shadows
				lines: {fill: true, lineWidth:1},
				colors: ["#51d466"],
				grid: {
					hoverable: false, color: "#bbb", backgroundColor:"#fff" ,borderWidth:1, borderColor:"#e8e8e8", labelMargin:15
				},
				xaxis: {
					ticks:14,
					font: {
						size: 12,
						color: "#aaa"
					}
				},
				yaxis: {
					ticks: 8,
					font: {
						size: 12,
						color: "#aaa"
					}
				}
			};
			var plot = $.plot($("#m-real-chart"), [ getRandomData() ], options);

			function update() {
				plot.setData([ getRandomData() ]);
				// since the axes don't change, we don't need to call plot.setupGrid()
				plot.setupGrid();
				plot.draw();
				check_alarm();
				setTimeout(update, updateInterval);
			}
			update();
		};

<!-- Realtime charts ends -->









		
<!-- Pie chart start -->
		
		$(function () {
		
			var data = [],
			series = 3;

			for (var i = 0; i < series; i++) {
				data[i] = {
					data: Math.floor((Math.random()*10)+1) + 1
				}
			}

			var placeholder = $("#m-pie-chart");

			placeholder.unbind();
				
			$.plot(placeholder, data, {
				series: {
					pie: { 
						show: true,
						innerRadius:0.6,
						label: {
							show: false
						}
					}
				},
				colors: ["#f75353","#51d466","#32c8de"],
				grid: {hoverable: false},
				legend: {
					show: false
				}
			});


		});
		<!-- Pie chart ends -->
		
		/* ****************************************** */
		/* Main area sparkline */
		/* ****************************************** */

		$("#spark1").sparkline([8,11,9,12,10,9,13,11,12,11,10,12,11,], {
			type: 'bar',
			height: '30',
			barWidth: 4,
			barColor: '#f75353'});

		$("#spark2").sparkline([8,11,9,12,10,9,13,11,12,11,10,12,11,], {
			type: 'bar',
			height: '30',
			barWidth: 4,
			barColor: '#51d466'});
			
		$("#spark3").sparkline([8,11,9,12,10,9,13,11,12,11,10,12,11,], {
			type: 'bar',
			height: '30',
			barWidth: 4,
			barColor: '#32c8de'});	
		$("#spark4").sparkline([8,11,9,12,10,9,13,11,12,11,10,12,11,], {
			type: 'bar',
			height: '30',
			barWidth: 4,
			barColor: '#32c8de'});	
			
